<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户登录</title>
    <link href="../css/main.css" rel="stylesheet" type="text/css">
    <link href="../bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../layer_v2.1/layer/skin/layer.css" rel="stylesheet" type="text/css">
    <link href="../css/new.css" rel="stylesheet" type="text/css">
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            border: 0;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .login-bg {
            background: url('../image/bgq.jpeg') 0 0 no-repeat;
            background-size: cover;
            width: 100vw;
            height: 100vh;
            min-width: 900px;
            left: 0;
            top: 0;
            position: absolute;
            z-index: -10;
        }
        
        .login-main {
            display: flex;
            align-content: center;
            flex-direction: column;
        }
        
        .login-main>img {
            width: 350px;
        }
        
        .login-main .form {
            margin-top: 100px;
            background: #fff;
            padding: 10px 20px;
            border-radius: 10px;
            width: 350px;
        }
        
        .login-main .title {
            font-size: 20px;
            text-align: center;
            color: #3b97d7;
            margin-bottom: 10px;
        }
        
        .login-main .form-group {
            width: 100%;
            margin-bottom: 15px;
        }
        
        .login-main .input-group {
            width: 100%;
            display: flex;
            align-items: center;
        }
        
        .login-main .input-group-addon {
            background: #fff;
            height: 34px;
            width: 35px;
            box-sizing: border-box;
            padding: 1px 3px;
        }
        
        #c-code {
            width: 140px;
            height: 34px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="login-bg"></div>

    <div class="login-main">
        <img src="../image/hongyueducation.png" />

        <div class="form">
            <div class="title">招生管理系统</div>
            <form class="form-inline">
                <div class="form-group">
                    <div class="input-group">
                        <img src="../image/phone.png" class="input-group-addon" alt="">
                        <input maxlength="11" type="text" class="form-control" id="phone" placeholder="请输入手机号">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <img src="../image/pwd.png" class="input-group-addon" alt="" style="padding: 3px;">
                        <input maxlength="20" type="password" class="form-control" id="pwd" placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <img src="../image/secu.png" class="input-group-addon" alt="">
                        <input maxlength="4" type="text" class="form-control" id="code" placeholder="请输入安全码">
                        <div id="c-code"></div>
                    </div>
                </div>
                <div style="display:flex;justify-content: space-between;">
                    <button id="btn" type="button" class="btn btn-primary " style="width:100%;margin-bottom: 10px">登录</button>
                </div>
            </form>
        </div>
    </div>



    <script src="../js/common.js"></script>
    <script src="../js/jquery.js"></script>
    <script src="../js/code.js"></script>

    <script>
        function toReginster() {
            location.href = './register.html'
        }

        function initCode() {
            var verifyCode = new GVerify("c-code");

            $('#btn').on('click', function() {
                var phone = $('#phone').val()
                var pwd = $('#pwd').val()
                var code = $('#code').val()
                if (!phone) {
                    return alert('请输入手机号');
                }
                if (!(/^1[3456789]\d{9}$/.test(phone))) {
                    return alert('请输入正确的手机号');
                }
                if (!pwd) {
                    return alert('请输入密码');
                }
                if (!code) {
                    return alert('请输入验证码');
                }
                if (!verifyCode.validate(code)) {
                    return alert('请输入正确的验证码');
                }
                $.ajax({
                    type: "POST",
                    url: baseUrl + 'webLogin',
                    data: {
                        userName: phone,
                        password: pwd
                    },
                    dataType: "json",
                    success: function(data) {
                        if (data.code === 200) {
                            localStorage.setItem('userInfo', JSON.stringify(data.data))
                            localStorage.setItem('loginTime', +new Date())
                            getMsg(data.data.perm)
                        } else {
                            alert(data.message);
                        }
                    }
                });
            })
        }
        initCode()

        function getMsg(perm) {
            var maps = ['admin', 'jiaowu', 'caiwu', 'teacher']
            $.ajax({
                type: "POST",
                url: baseUrl + 'studentInfo/message',
                data: {
                    userType: maps[perm]
                },
                headers: {
                    "Authorization": JSON.parse(localStorage.getItem('userInfo')).token
                },
                dataType: "json",
                success: function(res) {
                    var number = res.data
                    if (number != 0) {
                        layer.msg('登录成功！有' + number + '个驳回消息', {
                            time: 5000,
                            icon: 6,
                            offset: 'rt'
                        });
                    } else {
                        layer.msg('登录成功!')
                    }
                    setTimeout(() => {
                        location.href = './index.html'
                    }, 1500)
                }
            });
        }
    </script>
</body>

</html>